<template>
	<view class="container">
		<!-- 订单信息 -->
		<view class="order-card">
			<view class="order-header">
				<view class="user-info">
					<image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
					<view class="user-detail">
						<text class="nickname">{{orderInfo.userName}}</text>
						<text class="time">{{orderInfo.createTime}}</text>
					</view>
				</view>
				<text class="status">{{orderInfo.status}}</text>
			</view>
			
			<view class="order-content">
				<view class="title-row">
					<text class="title">{{orderInfo.title}}</text>
					<text class="price">￥{{orderInfo.price}}</text>
				</view>
				<text class="description">{{orderInfo.description}}</text>
				<view class="info-item">
					<text class="label">订单类型</text>
					<text class="value">{{orderInfo.type}}</text>
				</view>
				<view class="info-item">
					<text class="label">配送地点</text>
					<text class="value">{{orderInfo.location}}</text>
				</view>
				<view class="info-item">
					<text class="label">送达时间</text>
					<text class="value">{{orderInfo.time || '尽快送达'}}</text>
				</view>
				<view class="info-item">
					<text class="label">联系方式</text>
					<text class="value">{{orderInfo.contact}}</text>
				</view>
			</view>
		</view>
		
		<!-- 接单按钮 -->
		<view class="action-btn" @tap="takeOrder" v-if="orderInfo.status === '待接单'">
			立即接单
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderInfo: {}
		}
	},
	onLoad(options) {
		if (options.orderInfo) {
			this.orderInfo = JSON.parse(decodeURIComponent(options.orderInfo))
		}
	},
	methods: {
		takeOrder() {
			uni.showModal({
				title: '确认接单',
				content: '是否确认接此订单？接单后请及时与发布者联系。',
				success: (res) => {
					if (res.confirm) {
						// TODO: 发送接单请求
						uni.showLoading({
							title: '处理中...'
						})
						
						setTimeout(() => {
							uni.hideLoading()
							uni.showToast({
								title: '接单成功',
								icon: 'success'
							})
							// 返回上一页
							uni.navigateBack()
						}, 1500)
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: $background-color;
	padding-bottom: 120rpx;
}

.order-card {
	background-color: #fff;
	margin: 20rpx;
	border-radius: 12rpx;
	overflow: hidden;
	
	.order-header {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid $border-color;
		
		.user-info {
			display: flex;
			align-items: center;
			
			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				margin-right: 20rpx;
			}
			
			.user-detail {
				display: flex;
				flex-direction: column;
				
				.nickname {
					font-size: 32rpx;
					color: $text-color;
					margin-bottom: 4rpx;
				}
				
				.time {
					font-size: 24rpx;
					color: $text-color-grey;
				}
			}
		}
		
		.status {
			font-size: 28rpx;
			color: $theme-color;
			background-color: rgba($theme-color, 0.1);
			padding: 8rpx 20rpx;
			border-radius: 24rpx;
		}
	}
	
	.order-content {
		padding: 20rpx;
		
		.title-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			.title {
				font-size: 36rpx;
				color: $text-color;
				font-weight: bold;
			}
			
			.price {
				font-size: 40rpx;
				color: #ff5500;
				font-weight: bold;
			}
		}
		
		.description {
			font-size: 28rpx;
			color: $text-color;
			margin-bottom: 30rpx;
			display: block;
		}
		
		.info-item {
			display: flex;
			margin-bottom: 20rpx;
			
			.label {
				width: 140rpx;
				font-size: 28rpx;
				color: $text-color-grey;
			}
			
			.value {
				flex: 1;
				font-size: 28rpx;
				color: $text-color;
			}
		}
	}
}

.action-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: $theme-color;
	color: #fff;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style> 